<template>
	<view>
		<view class="top">
			<img class="backimage" src="../../../static/back.jpg" alt="" />
		</view>
		<view class="body">
			<input class="image" type="image" src="" alt="" />
			<input class="text" type="text" focus name="" id="" placeholder="请输入昵称" v-model="nickName" />
			<input class="password" type="password" name="" id="" placeholder="请输入密码" v-model="password1" />
			<input class="password" type="password" name="" id="" placeholder="请再次输入密码" v-model="password2" />
			<input class="email" type="email" name="" id="" placeholder="请输入邮箱" v-model="email" />
			<input class="button" type="button" value="注册" @click="register" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const icon = ref()
	const nickName = ref()
	const password1 = ref()
	const password2 = ref()
	const email = ref()
	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

	function register() {
		// console.log(nickName)
		if (nickName.value == null || password1.value == null || password2.value == null || email.value == null) {
			uni.showToast({
				title: '输入为空，请输入',
				icon: 'none',
				duration: 1500,
			});

		} else {
			if (password1.value === password2.value) {
				if (!emailRegex.test(email.value)) {
					// 检查邮箱格式
					uni.showToast({
						title: '邮箱格式不正确，请重新输入',
						icon: 'none',
						duration: 1500,
					});
				} else {

					// 构建发送的数据
					        const requestData = {
					            id: '',
					            account: nickName.value,
					            password: password1.value,
					            nickName: nickName.value,
					            icon: '',
					            email: email.value
					        };
					
					        // 发送 POST 请求
					        uni.request({
					            url: 'http://localhost:8081/register',
					            method: 'POST',
					            data: requestData,
					            header: {
					                'Content-Type': 'application/json' // 指定请求的内容类型为 JSON
					            },
					            success: (res) => {
					                if (res.statusCode === 200) {
					                    // 根据服务器的返回结果判断注册是否成功
					                    uni.showToast({
					                        title: '注册成功',
					                        icon: 'success',
					                        duration: 1000,
					                    });
					                    setTimeout(() => {
					                        uni.redirectTo({
					                            url: '/pages/Login/Login'
					                        });
					                    }, 1000);
					                } else {
					                    uni.showToast({
					                        title: '注册失败，请重试',
					                        icon: 'none',
					                        duration: 1500,
					                    });
					                }
					            },
					            fail: () => {
					                uni.showToast({
					                    title: '请求失败，请检查网络',
					                    icon: 'none',
					                    duration: 1500,
					                });
					            }
					        });
				}} else {
					uni.showToast({
						title: '两次密码不一致请重新输入',
						icon: 'none',
						duration: 1000,
					});
				}
			}
		}
</script>

<style scoped lang="scss">
	.backimage {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: -1;
	}

	.body {
		padding: 5rem;
		text-align: left;

		input {
			height: 1.5rem;
			margin: 1rem auto;
			padding: 0 0.5rem;
			border-radius: 0.25rem;
			background-color: white;
		}

		.image {
			width: 4rem;
			height: 4rem;
			padding: 0;
			border: none;
			border-radius: 2rem;
		}

		.button {
			width: 4rem;
			margin-right: 0;
			padding: 0;
			text-align: center;
		}
	}
</style>